위치 및 표시 속성

✒️ 2025-05-16 12:54 내용 수정

display

속성 속성값 설명
display 모든 display 속성 설정
none 해당 요소를 표시하지 않음. 레이아웃에서도 영향을 미치지 않음.
block inline -> block, 요소를 block으로 표시
inline block -> inline, 요소를 inline으로 표시
inline-block 요소를 inline-block으로 표시. 요소 자체는 inline, 내부는 block으로 작용.
flex 요소를 flex 박스 모델인 flexbox 컨테이너로 설정. 요소를 나란히 배치(부모에 적용)
grid 요소를 grid 컨테이너로 설정 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			.a2{display:block;
			  border:1px solid black;}
			
			li{list-style: none;
			   display:inline;}
			.box a{ background:blue;
					text-decoration: none;
					color:white;
					padding:5px;
					margin:3px;
					font-weight: bold;}
		</style>
	</head>
	<body>
		<a class="a1" href="#">inline 요소를 그대로 사용</a>
		<a class="a2" href="#">inline 요소를 block 요소로 표시하기</a>
		
		<div id="box">
			<h1>block 요소를 inline 요소로 표시하기</h1>
			<ul>
				<li>항목1</li>
				<li>항목2</li>
				<li>항목3</li>
				<li>항목4</li>
			</ul>
		</div>
	</body>
</html>

display 예제.png

opacity와 filter

opacity: 1; /* 불투명도 최대 = 눈에 보임 */
opacity: 0; /* 불투명도 최소 = 눈에 안보임 */

filter: blur(4px) brightness(0.7);
filter: brightness(0.7);
filter: contrast(150%);
filter: drop-shadow(1px 1px 5px black);
filter: hue-rotate(60deg);
속성값 설명
blur 이미지에 가우시안 블러 적용
픽셀 값이 클수록 이미지가 흐려짐
brightness 이미지를 밝거나 어둡게 표시
0% : 검은 이미지
100% : 이미지 기본 설정
100% 이상 : 더 밝은 이미지
contrast 이미지 대비 조정
0% : 완전한 회색
100% : 이미지 기본 설정
100% 이상 : 대비가 더 큰 이미지 생성
drop-shadow 이미지에 그림자 효과 적용
offset-x offset-y는 필수 설정
grayscale 이미지를 흑백으로 변환
0% : 이미지 기본 설정
100% : 완전히 흑백
saturate 이미지의 채도 변경
0% : 완전한 무채색
100% : 이미지 기본 설정
100% 이상 : 원본보다 채도가 더 큰 이미지 생성
sepia 이미지를 세피아로 변환
100% : 완전한 세피아
0% : 이미지 기본 설정
hue-rotate 이미지에 색조 회전을 적용하며, 각도 입력값은 입력 샘플을 조절할 색상환 각도
0deg : 이미지 그대로 유지
0deg~360deg를 순회함
invert 이미지 색을 반전
100% : 정 반대
0% : 이미지 기본 설정

visibility

속성 속성값 설명
visibility 모든 visibility 속성 설정
visible 해당 요소를 웹 페이지에 표시
hidden 해당 요소를 웹 페이지에 표시하지 않음.
display:none과 다르게 레이아웃에 남음.
collapse 동적 테이블에서만 사용. 테이블 테두리를 한 줄만 보여줌.

position

속성 속성값 설명
position position 설정 지정
static 기본값. 문서의 흐름에 따라 배치
absolute 요소를 문서의 흐름에서 제거. 가장 가까운 위치의 부모 요소를 기준으로 배치
만약 부모 및 조상 요소가 static이라면 body 태그를 기준으로 배치
만약 부모 및 조상 요소가 position 속성이 없다면 position 문서의 body 태그를 기준으로 배치
기준으로 지정할 부모 요소에 static을 제외한 position 속성을 지정해서 사용
absolute로 설정 시 inline 요소더라도 너비, 폭, 마진, 패딩이 적용됨
relative 요소 자신을 기준으로 배치하고 다른 요소에 영향을 주지 않음
top, right, bottom, left 속성을 사용
해당 위치로부터 떨어질 거리를 설정하게 됨(ex: top 5px = 위로부터 5px 떨어짐)
fixed 요소를 viewport(브라우저) 기준으로 배치. 스크롤 해도 위치 고정
ex) 쇼핑몰에서 top/bottom 이동 버튼
sticky 부모 요소 내에서 스크롤 되는 동안 relative로, 스크롤이 특정 지점에 도달하면 fixed로 동작 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			*{margin:0; padding:0;}
			
			#header{width:1000px; height:80px;
					margin:10px auto;
					border:2px solid black;
					position:relative;}
					
			ul{overflow:hidden;}
			li{float:left;
				list-style: none;
				padding:10px;}
			
			.u1{position:absolute;
				left:100px; top:10px;}
			.u2{position:absolute;
				left: 200px; top:40px;}
			.a1{position:absolute;
				left:10px; top:6px;}
			p:last-child{position:absolute;
						right:10px; top:6px;}
				
		</style>
	</head>
	<body>
		<div id="header">
			<p class="a1">
				<img alt="star" src="image/star.png" width="60" height="60">
			</p>
			<ul class="u1">
				<li>메뉴1</li>
				<li>메뉴2</li>
				<li>메뉴3</li>
				<li>메뉴4</li>
				<li>메뉴5</li>
			</ul>
			<ul class="u2">
				<li>메뉴6</li>
				<li>메뉴7</li>
				<li>메뉴8</li>
				<li>메뉴9</li>
				<li>메뉴10</li>
			</ul>
			<p><img alt="star" src="image/star.png" width="60" height="60"></p>
		</div>
	</body>
</html>

position 예제.png

<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			.box {
				position : relative;
			}
			
			.sub-box {
				position : absolute;
				top : 50%; left: 50%;
				/* 요소를 본인의 크기만큼 반대로 이동시켜 중앙에 오도록 배치 */
				transform : translate(-50%, -50%);
			}

			.top-box {
				/* 다른 자식 요소보다 상대적으로 앞으로 가져옴 */
				z-index : 1
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="sub-box"></div>
			<div class="sub-box top-box"></div>
		</div>
	</body>
</html>

z-index

속성 속성값 설명
z-index n 요소의 표시 순서를 n으로 지정
inherit 부모 요소의 z-index를 상속받음
auto 새로운 요소 쌓임 순서를 생성하지 않음 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			*{margin:0; padding:0;}
			p{border: 1px solid black;
			width:100px;
			height:100px;
			padding:10px;
			position:absolute;}
			
			#a1{background: yellow;
				left:100px; top:100px;
				z-index:3;}
			#a2{background: orange;
				left:130px; top:130px;
				z-index:2;}
			#a3{background: red;
				left:160px; top:160px;
				z-index:1;}
		</style>
	</head>
	<body>
		<p id="a1">z-index 테스트1</p>
		<p id="a2">z-index 테스트2</p>
		<p id="a3">z-index 테스트3</p>
	</body>
</html>

zindex 예제.png

float

속성 속성값 설명
float 모든 float 설정 지정
none 요소를 띄우지 않음
left 왼쪽에 부유하는 block 박스 생성
right 오른쪽에 부유하는 blcok 박스 생성
inherit 부모 요소의 float 속성을 상속받음 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			*{margin:0; padding:0;}
			.box{margin:10px auto;
				 width:500px;
				 border: 5px solid pink;
				 background:blanchedalmond;
				 overflow:hidden;
				 padding: 10px;}
			h1{text-align:center;}
			.div1{width:200px;
				  height:80px;
				  background:lightskyblue;
				  float: left;}
			.div1 p{padding-left:10px;}
			.div1 ul{padding-left:30%;}
			.div2{width:200px;
				  height:80px;
				  background:cadetblue;
				  float: right;}
			.div2 p{padding-left:10px;}
			.div2 ul{padding-left:30%;}
		</style>
	</head>
	<body>
		<div class="box">
			<h1>float 연습</h1>
			<div class="div1">
				<p>float을 통한 정렬</p>
				<ul>
					<li>내부 항목1</li>
					<li>내부 항목2</li>
				</ul>
			</div>
			<div class="div2">
				<p>float을 통한 정렬2</p>
				<ul>
					<li>내부 항목1</li>
					<li>내부 항목2</li>
				</ul>
			</div>
		</div>
	</body>
</html>

float 예제.png